<template>
    <div class="age">
        <div class="top">
            <span style="color: aliceblue;font-weight: 700;font-size: 20px;">年龄分布</span>
            <div class="logo"></div>

        </div>



        <div class="charts" ref="charts"></div>
    </div>
</template>
<script setup name='age'>
    import { ref, onMounted } from 'vue'
    //echarts插件引入
    import * as echarts from 'echarts'
    //水球图拓展插件
    import 'echarts-liquidfill'
    let people = ref('20008123人')
    //水球图的实例
    let charts = ref()
    onMounted(() => {
        let mycharts = echarts.init(charts.value)
        mycharts.setOption({
         

            grid:{
                left:0,
                top:0,
                right:0,
                bottom:'100px'
            },
            series:
            {
                type: 'pie',
 //内半径和外半径组合成一个环
                radius: ['50%', '86%'],
                data: [
                    { value: 1048, name: '10-15岁' },
                    { value: 735, name: '15-25岁' },
                    { value: 580, name: '25-35岁' },
                    { value: 484, name: '35-55岁' },
                    { value: 300, name: '55-100岁' }
                ],
                label: {
                    show: true, // 显示标签
                    position: 'inside', // 在饼图内部显示标签
                    formatter: '{d}%',
                    color:'white'
                },
                //
            },
            legend: {
                orient: 'vertical',
                right:'20px',
                top:'40px',

                textStyle:{
                        color:'white'
                    }
            },
        })
    })
</script>
<style scoped lang='scss'>
    .age {
        margin: 10px 0 50px 30px;
        position: relative;
        background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
        background-size: cover;

        .top {
            .logo {

                display: block;
                margin-top: 10px;
                width: 68px;
                height: 7px;
                background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

            }


        }

        .center {
            margin-top: 40px;
            display: flex;
        
            justify-content: center;

            .left {
                margin: 20px;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/man-bg.png') no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .right {
                margin: 20px;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/woman-bg.png') no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .bottom {
            padding: 0 114px;
            display: flex;
            justify-content: space-between
        }


    }

    .charts {
        width: 100%;
        height: 220px;
        
    }
</style>